<script setup>

</script>

<template>
  <div class="index_view">
    <div class="links_header">
      <div class="links_title">刺绣作品概览链接</div>
      <div class="links_content">
        <div class="links_box">
          <div class="link_item">
            <div class="link_item_title">刺绣</div>
            <div class="link_item_input">
              <input placeholder="刺绣作品概览连接"/>
            </div>
          </div>
          <div class="link_item">
            <div class="link_item_title">花鸟刺绣</div>
            <div class="link_item_input">
              <input placeholder="刺绣作品概览链接"/>
            </div>
          </div>
          <div class="link_item">
            <div class="link_item_title">动物图案</div>
            <div class="link_item_input">
              <input placeholder="刺绣作品概览链接"/>
            </div>
          </div>
          <button>
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
              <path
                  d="M249.03 376.609a25.733 25.733 0 0 1-32.308 13.223 25.02 25.02 0 0 1-13.26-32.345c7.4-16.905 16.228-33.172 26.484-48.537a281.436 281.436 0 0 1 36.74-43.39 288.252 288.252 0 0 1 90.462-61.76 25.02 25.02 0 0 1 19.122 45.569 163.98 163.98 0 0 0-40.46 22.052 225.778 225.778 0 0 0-36.027 28.701 303.89 303.89 0 0 0-29.415 36.027 225.027 225.027 0 0 0-21.3 40.46z m564.033 378.676l176.453 176.49a41.174 41.174 0 0 1-57.328 58.83L754.947 813.365a445.621 445.621 0 0 1-455.877 69.123 452.233 452.233 0 0 1-241.933-241.18A441.188 441.188 0 0 1 24.003 472.93a441.188 441.188 0 0 1 130.17-318.42A444.87 444.87 0 0 1 470.376 23.629a453.303 453.303 0 0 1 170.592 33.81 441.188 441.188 0 0 1 147.075 97.074 448.551 448.551 0 0 1 94.143 144.859 456.291 456.291 0 0 1 33.06 168.413 444.87 444.87 0 0 1-34.562 171.306A450.768 450.768 0 0 1 811.56 753.07l1.503 2.254zM609.374 132.46a367.67 367.67 0 0 0-397.084 79.417 380.18 380.18 0 0 0-79.417 118.374A374.281 374.281 0 0 0 105.674 470a361.771 361.771 0 0 0 26.447 137.495 372.065 372.065 0 0 0 79.417 118.374 359.592 359.592 0 0 0 119.126 80.882 372.816 372.816 0 0 0 139.75 26.485 361.02 361.02 0 0 0 138.96-26.485 350.764 350.764 0 0 0 117.66-78.665 367.67 367.67 0 0 0 107.292-257.41 377.211 377.211 0 0 0-26.447-137.496 367.67 367.67 0 0 0-73.557-116.195 367.67 367.67 0 0 0-124.986-84.564z m98.538 337.503a24.268 24.268 0 0 1 24.983-24.982c13.824 0 25.02 11.195 25.02 24.982a294.15 294.15 0 0 1-22.09 111.048 285.322 285.322 0 0 1-155.152 152.222C545.848 748.26 508.318 756 470.376 756.037a25.02 25.02 0 0 1-24.982-22.804 24.268 24.268 0 0 1 24.982-25.02 233.104 233.104 0 0 0 90.461-16.905 239.716 239.716 0 0 0 77.2-51.467 234.57 234.57 0 0 0 51.468-73.518 234.932 234.932 0 0 0 18.407-96.36z"></path>
            </svg>
            查找
          </button>
        </div>
        <div class="links_box">
          <div class="link_item">
            <div class="link_item_title">关键词</div>
            <div class="link_item_input">
              <input placeholder="作品名称"/>
            </div>
          </div>
          <div class="link_item">
            <div class="link_item_title">背景色</div>
            <div class="link_item_input">
              <input placeholder="作者"/>
            </div>
          </div>
          <div class="link_item">
            <div class="link_item_title">描述</div>
            <div class="link_item_input">
              <input placeholder="发布日期"/>
            </div>
          </div>
          <button>
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
              <path
                  d="M396.864232 950.975406H172.032372a98.879938 98.879938 0 0 1-99.071938-98.687939V173.439892a99.487938 99.487938 0 0 1 99.071938-99.199938h678.399576a99.007938 99.007938 0 0 1 99.263938 98.623938v0.576l-1.599999 192.639879v0.192a36.703977 36.703977 0 0 0 73.183955 0.064l1.471999-192.70388V173.439892a172.159892 172.159892 0 0 0-172.159893-172.159893H172.032372A171.903893 171.903893 0 0 0 0.00048 173.055892V851.839468a171.455893 171.455893 0 0 0 50.367969 121.791923A171.519893 171.519893 0 0 0 172.160372 1023.99936h224.83186a36.511977 36.511977 0 0 0-0.128-73.023954"></path>
              <path
                  d="M1012.159847 961.759399l-92.159942-91.743943a219.519863 219.519863 0 0 0-333.823791-282.463823 219.519863 219.519863 0 0 0 282.367823 333.951791l91.999943 91.775943a36.607977 36.607977 0 0 0 51.647967-51.551968h-0.032z m-270.71983-72.703955a146.239909 146.239909 0 0 1-0.064-292.447817h0.128a146.239909 146.239909 0 1 1 0 292.447817h-0.064z m62.335961-558.75165a36.607977 36.607977 0 1 0 0-73.215955L219.264343 256.895839a36.575977 36.575977 0 0 0 0 73.151955l584.511635 0.256zM219.328343 527.26367a36.479977 36.479977 0 0 0 0 72.959955l182.783886-0.128c13.087992 0.128 25.247984-6.751996 31.87198-18.047989a36.607977 36.607977 0 0 0-31.87198-54.847965l-182.783886 0.063999z"></path>
            </svg>
            查询
          </button>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="return_btn">
        <button>
          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M243.675429 711.021714a36.352 36.352 0 0 1-16.676572-12.178285L226.742857 698.514286l-109.714286-146.285715a36.571429 36.571429 0 1 1 58.514286-43.885714l55.588572 74.057143c26.441143-104.813714 96.329143-193.060571 191.926857-238.811429A331.812571 331.812571 0 0 1 566.857143 310.857143c192.365714 0 347.428571 164.205714 347.428571 365.714286a36.571429 36.571429 0 0 1-73.142857 0c0-162.011429-123.282286-292.571429-274.285714-292.571429-39.204571 0-77.238857 8.777143-112.201143 25.526857-77.202286 36.973714-133.668571 109.568-153.892571 195.949714l82.139428-51.346285a36.571429 36.571429 0 0 1 47.908572 8.155428l2.486857 3.474286a36.571429 36.571429 0 0 1-11.629715 50.395429l-145.700571 91.062857a36.498286 36.498286 0 0 1-4.205714 2.377143l3.620571-2.011429a36.754286 36.754286 0 0 1-27.940571 4.534857l-3.766857-1.097143z"></path>
          </svg>
          内容
        </button>
      </div>
      <table class="content_table">
        <tr>
          <th>刺绣编号</th>
          <th>刺绣作品</th>
          <th>图片概览</th>
          <th>详情</th>
        </tr>
        <tr v-for="item in 15">
          <td>{{ item }}</td>
          <td>{{ item }}</td>
          <td>{{ item }}</td>
          <td>{{ item }}</td>
        </tr>
      </table>
      <div class="page_box">
        <el-pagination layout="prev, pager, next" :total="1000" size="large"/>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.index_view {
  .links_header {
    padding: 0 30px;
    margin: 50px 80px 30px 150px;
    border-bottom: 2px solid rgb(0, 0, 0, 0.1);

    .links_title {
      font-size: 17px;
      font-weight: bold;
    }

    .links_content {
      margin-top: 20px;

      .links_box {
        display: flex;
        gap: 100px;
        margin-bottom: 20px;

        .link_item {
          display: flex;
          align-items: center;

          .link_item_title {
            width: 90px;
            color: #5b6b73;
          }

          .link_item_input {
            input {
              width: 220px;
              height: 35px;
              border-radius: 5px;
              border: none;
              outline: none;
              padding-left: 10px;
              background-color: #f7f8fa;
            }
          }
        }

        button {
          margin-left: -50px;
          width: 70px;
          color: #ffffff;
          background-color: var(--cx-color4);
          outline: none;
          border: none;
          border-radius: 4px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 5px;

          svg {
            width: 12px;
            height: 12px;
            fill: currentColor;
          }

          &:active {
            transform: scale(0.95);
          }
        }
      }
    }
  }

  .main {
    padding: 0 180px;

    .return_btn {
      button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 90px;
        height: 35px;
        border: none;
        outline: none;
        border-radius: 7px;
        color: white;
        font-weight: bold;
        background-color: var(--cx-color4);
        cursor: pointer;

        svg {
          width: 20px;
          height: 20px;
          fill: currentColor;
        }

        &:active {
          transform: scale(0.95);
        }
      }
    }

    .content_table {
      margin-top: 30px;
      margin-bottom: 30px;
      width: 100%;
      border-collapse: collapse;

      th, td {
        padding: 10px;
        border-top: 1px solid rgb(0, 0, 0, 0.1);
        border-bottom: 1px solid rgb(0, 0, 0, 0.1);
        text-align: center;
        font-size: 14px;
      }

      th {
        background-color: #f2f3f5;
        font-weight: bold;
      }
    }

    .page_box {
      margin-bottom: 20px;
      display: flex;
      justify-content: right;
    }
  }
}
</style>